<template>
<div>
    <van-popup v-model="showStartDate" position="bottom" :overlay="false">
        <van-datetime-picker v-model="pickStartDate" title="选择开始日期" type="date" @confirm="onStartDatePick" @cancel="onCancelStartPick"/>
    </van-popup>
    <van-popup v-model="showEndDate" position="bottom" :overlay="false">
        <van-datetime-picker v-model="pickEndDate" title="选择结束日期" type="date" @confirm="onEndDatePick"  @cancel="onCancelEndPick"/>
    </van-popup>
</div>
</template>
<script>
import { DatetimePicker } from 'vant';
export default {
  name: 'pick-date',
  props: {
      show: false
  },
    
  data() {
    const today = new Date();

    return {
      startDate: today,
      endDate: today,
      showStartDate: false,
      showEndDate: false,
      pickStartDate: today,
      pickEndDate: today,
    }
  },

  watch: {
      show() {
          this.showStartDate = this.show;
      }
  },

  methods: {
    onStartDatePick() {
        this.showStartDate = false;
        this.showEndDate = true;
        this.startDate = this.pickStartDate;
    },
    onEndDatePick() {
        this.showEndDate = false;
        this.endDate = this.pickEndDate;
        this.$emit('picked', this.startDate, this.endDate);
    },
    onCancelStartPick() {
        this.showStartDate = false;
        this.pickStartDate = this.startDate;
        this.$emit('cancel');
    },
    onCancelEndPick() {
        this.showEndDate = false;
        this.pickEndDate = this.endDate;
        this.$emit('cancel');
    }
  },
  components: {
      [DatetimePicker.name]: DatetimePicker
  }
}
</script>
